@mixin line($num) {
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin style-light($base, $color, $bg-percent, $bo-percent, $co-percent) {
  background: mix($base, $color, $bg-percent);
  border-color: mix($base, $color, $bo-percent);
  color: mix($base, $color, $co-percent);
}

/* 滚动条样式 */
@mixin scrollBarStyle() {
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  // 正常情况下滑块的样式
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }

  // 正常时候的主干部分
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: white;
  }

  // 鼠标悬浮在该类指向的控件上时滑块的样式
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }

  // 鼠标悬浮在滑块上时滑块的样式
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }

  // 鼠标悬浮在滚动条上的主干部分
  &::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, 0.01);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  }
}

// 从alert挪过来暂时存放
@mixin is-light($color) {
  &.is-light {
    border-color: $color;

    .el-alert__closebtn {
      color: $color;
    }
  }
}
